<template>
	<view>
		<u-navbar :border-bottom="false" title-color="#FFFFFF" back-icon-color="#FFF" :is-fixed="isFixed"
			:is-back="isBack" :background="background" :back-text-style="{color: '#FFF'}" :title="title"
			:back-icon-name="backIconName" :back-text="backText">
			<view class="slot-wrap" v-if="useSlot">
				<view class="map-wrap" v-if="custom" @click="GotoCut">
					<text class="map-wrap-text">切换门户</text>
					<u-icon name="arrow-right" color="#ffffff" size="32"></u-icon>
				</view>
				<view class="navbar-right" v-if="rightSlot">
					<view class="message-box right-item">
						扫一扫
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="content">

			<view class="Top_Wrap"> 
				<!-- <image mode="widthFix" src="../../../static/img/bg.jpg"></image> -->
				<image mode="widthFix" src="https://api.zlkj-port.com/prod-api/profile/img/bg.jpg"></image>
				<view class="Top_item_box">
					<view class="Top_item">

						<!-- <view class="Top_item_noe">
							<navigator url="/pages/ohterpro/web-view/webView">
								<image src="../../../static/img/chuan1.png"></image>
								<view>大丰港</view>
							</navigator>
						</view> -->

						<view class="Top_item_noe" @tap="navTo(item)" v-for="(item,index) in portList" v-if="item!=''">
							<view>
								<image src="../../../static/img/chuan1.png"></image>
								<view>{{item.portname}}</view>
							</view>
						</view>

						<!-- <view class="Top_item_noe" @tap="navTo('dfg')">
							<view>
								<image src="../../../static/img/chuan1.png"></image>
								<view>大丰港</view>
							</view>
						</view>
						
						<view class="Top_item_noe" @tap="navTo('ykg')">
							<view>
								<image src="../../../static/img/chuan2.png"></image>
								<view>营口港</view>
							</view>
						</view> -->

						<!-- <view class="Top_item_noe" @tap="navTo('szgj')">
							<view>
								<image src="../../../static/img/chuan1.png"></image>
								<view>苏中国际</view>
							</view>
						</view>

						<view class="Top_item_noe" @tap="navTo('cygj')">
							<view>
								<image src="../../../static/img/chuan2.png"></image>
								<view>长源国际</view>
							</view>
						</view> -->

					</view>
				</view>
			</view>

			<view class="option_list">
				<view class="list_box">
					<view class="list_item">
						<image src="../../../static/img/nanbei.png"></image>
						<view>南北通道</view>
						<image src="../../../static/img/rightjiao.png"></image>
					</view>
					<!-- <view class="list_item">
						<image src="../../../static/img/jizhuangx.png"></image>
						<view>共享集箱</view>
						<image src="../../../static/img/rightjiao.png"></image>
					</view> -->
					<view class="list_item">
						<image src="../../../static/img/wuliu.png"></image>
						<view>物流资讯</view>
						<image src="../../../static/img/rightjiao.png"></image>
					</view>
					<!-- <view class="list_item">
						<image src="../../../static/img/fuwu.png"></image>
						<view>服务介绍</view>
						<image src="../../../static/img/rightjiao.png"></image>
					</view> -->
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				title: '港口大数据',
				backText: '返回',
				backIconName: 'nav-back',
				rightSlot: false,
				useSlot: true,
				background: {
					backgroundColor: '#2979ff',
				},
				isBack: false,
				custom: true,
				isFixed: true,
				// #ifdef MP
				slotRight: false,
				// #endif
				// #ifndef MP
				slotRight: true,
				// #endif
				portList: []
			};
		},
		computed: {
			...mapState(['activePort', 'userInfo'])
		},
		onLoad() {

		},
		onShow() {

			if (uni.getStorageSync("portname")) {
				//this.portList = uni.getStorageSync("portname")
				this.getportroledata()
			} else {
				uni.clearStorageSync()
				uni.reLaunch({
					url: '/pages/tabbar/tabbar-5/tabbar-5'
				})
			} 

		},
		methods: {
			getportroledata(){
				uni.request({
					url: 'https://api.zlkj-port.com/prod-api/user/homepagerole?openid=' + uni.getStorageSync("userInfo").openid,
					// url: 'http://localhost:9021/user/homepagerole?openid=' + uni.getStorageSync("userInfo").openid,
					method: "get",
					success: (res) => {
						uni.setStorageSync("nickName", res.data.nickName)
						this.portList = res.data.portroledata
						uni.setStorageSync("portname", res.data.portroledata)
					}
				})
			},
			GotoCut() {
				uni.navigateTo({
					url: '../../classify/classify'
				})
			},
			navTo(item) {
				console.log(item)
				let userInfo = uni.getStorageSync("userInfo")
				userInfo.roleName = item.rolename
				uni.setStorageSync("userInfo", userInfo)
				let portName = item.portname
				if (!(this.userInfo && this.userInfo.mobile)) {
					uni.reLaunch({
						url: '/pages/tabbar/tabbar-5/tabbar-5'
					})
					return
				}
				this.$store.commit('setActivePort', {
					activePort: portName
				})
				if (portName == 'cygj') {
					uni.navigateTo({
						url: '/pages/portDetails/portDetailsNew?portName=' + portName
					})
				} 
				else if (portName == '福莱特') {
					uni.navigateTo({
						url: '../../driver1/driver?allow=' + item.allow + '&portname=' + portName
					})
				}
				else if (portName == '苏中国际') {
					uni.navigateTo({
						url: '../../driver/driver?allow=' + item.allow + '&portname=' + portName
					})
				} else if (portName == '大丰港'){
					uni.navigateTo({
						url: '../../dafeng/driver?allow=' + item.allow + '&portname=' + portName
					})
				}
				else if (portName == '长源国际'){
					uni.navigateTo({
						url: '../../driver/changyuanDriver?allow=' + item.allow + '&portname=' + portName
					})
				}
				else if (portName == '中林如皋港'){
					uni.navigateTo({
						url: '../../driver/zhonglingDriver?allow=' + item.allow + '&portname=' + portName
					})
				}
				else {
					uni.navigateTo({
						url: '/pages/portDetails/portDetails'
					})
				}




				// // uni.reLaunch({
				// // 	url: '/pages/record/index'
				// // })
				// // return
				// if(!(this.userInfo && this.userInfo.mobile)) {
				// 	uni.reLaunch({
				// 		url: '/pages/tabbar/tabbar-5/tabbar-5'
				// 	})
				// 	return
				// }

				// uni.navigateTo({
				// 	url:'../../driver/driver'
				// })
				// return;
				// this.$store.commit('setActivePort', {
				// 	activePort: portName
				// })
				// if (portName == 'szgj' || portName == 'cygj') {
				// 	uni.navigateTo({
				// 		url: '/pages/portDetails/portDetailsNew?portName=' + portName
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages/portDetails/portDetails'
				// 	})
				// }
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}
	
	.u-demo {
		//height: 200vh;
		height: calc(100% - 44px);
		height: calc(100% - 44px - constant(safe-area-inset-top));
		height: calc(100% - 44px - env(safe-area-inset-top));
	}

	.wrap {
		padding: 24rpx;
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
		margin-left: auto;
	}

	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
	}

	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}

	.message-box {}

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.map-wrap {
		display: flex;
		align-items: center;
		padding: 4px 6px;
		color: #fff;
		font-size: 30rpx;
		border-radius: 100rpx;
		margin-left: 30rpx;
	}

	.map-wrap-text {
		padding: 0 6rpx;
	}



	.Top_Wrap {
		width: 100%;
		position: relative;
		margin-bottom: 70px;
	}

	.Top_Wrap image {
		width: 100%;
	}

	.Top_item_box {
		background: #fff;
		width: 88%;
		border-radius: 10px;
		margin: 0 auto;
		padding: 15px;
		position: absolute;
		bottom: -48px;
		left: 0;
		right: 0;
	}

	.Top_item {
		display: flex;
		align-items: center;
	}

	.Top_item .Top_item_noe:nth-child(3) {
		border-right: 0px solid #f3f3f3;
	}

	.Top_item_noe {
		flex: 1;
		text-align: center;
		border-right: 1px solid #f3f3f3;
	}

	.Top_item_noe image {
		width: 40px;
		height: 40px;
	}

	.option_list {
		background-color: #FFFFFF;
	}

	.list_box {
		padding: 0 12px;
	}

	.list_item {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f5f5f5;
		padding: 20px 0;
		font-size: 34rpx;
	}

	.list_item image:nth-child(1) {
		width: 40px;
		height: 40px;
		margin-right: 6px;
	}

	.list_item image:nth-child(3) {
		width: 16px;
		height: 16px;
		margin-left: auto;
	}
</style>
